<template>
  <div class="app-container">
    <div style="margin:0 0 5px 20px">

      <el-form :inline="true" :model="form">
        <el-form-item label="选择商户">
          <el-select v-model="form.id" placeholder="请选择商户">
            <el-option v-for="item2 in userlist" :key="item2.id" :label="`${item2.username} (${item2.nickname})`" :value="item2.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="form.orderno" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.style" placeholder="请选择类型">
            <el-option label="充值" value="1" />
            <el-option label="提现" value="2" />
            <el-option label="代理佣金" value="3" />
            <el-option label="后台操作" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="form.date" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp" align="right" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">筛选</el-button>
          <el-button type="info" @click="reset">重置</el-button>
          <el-button type="success" @click="dataExport">导出记录</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" stripe>
        <el-table-column label="商户昵称">
          <template slot-scope="scope">
            {{ scope.row.user ? scope.row.user.nickname : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="orderno_with_merchant" label="订单号" />
        <el-table-column prop="style_text" label="类型" />
        <el-table-column prop="money" label="金额" />
        <el-table-column prop="before" label="变更前" />
        <el-table-column prop="after" label="变更后" />
        <el-table-column prop="memo" label="备注" />
        <el-table-column prop="createtime_text" label="添加时间" />
      </el-table>
      <el-pagination background layout="prev, pager, next" :current-page.sync="page" :total="total" :page-size="pageSize" class="margin-big-top" @current-change="handlePageChange" />
    </div>
  </div>
</template>

<script>
import { agentmoneylog, moneyexport } from '@/api/user'
import { userlist } from '@/api/agent'
export default {
  name: 'UserMoneyLog',
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      tableData: [],
      page: 1, // 当前默认第一页
      total: 0,
      pageSize: 10,
      form: {
        orderno: '',
        style: '',
        date: '',
        id: ''
      },
      userlist: [],
      apiList: [],
      extend: {}
    }
  },
  computed: {
    agentId() {
      return this.$route.query.agentId ? this.$route.query.agentId : this.$store.state.user.info.merchant_id
    }
  },
  watch: {
    page() {
      this.getList()
    }
  },
  mounted() {
    this.getList()
    const data = {
      agentId: this.agentId
    }
    userlist(data).then(resp => {
      this.userlist = resp.data.data
    })
  },
  methods: {
    handlePageChange(newPage) {
      this.page = newPage
    },
    dataExport() {
      // 检查必要参数是否存在
      if (!this.form || !this.form.id || !this.form.date) {
        this.$message.error('导出数据失败：缺少必要参数 商户号 或 时间范围')
        return
      }
      moneyexport(this.form).then(resp => {
        if (!resp.data) {
          this.$message.error('导出失败，请重试')
          return
        }
        const blob = new Blob([resp.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = '账单导出记录.xlsx' // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
        this.$message.success('导出成功')
      }).catch(() => {
        this.$message.error('导出失败，请重试')
      })
    },
    reset() {
      this.form = {
        orderno: '',
        style: '',
        date: '',
        id: ''
      }
      this.page = 1
      this.getList()
    },
    getList() {
      agentmoneylog(this.form).then(resp => {
        this.tableData = resp.data.data.list
        this.total = resp.data.data.total
        this.pageSize = resp.data.data.limit
        this.extend = resp.data.data.extend
      })
    }
  }
}
</script>

<style scoped>

</style>
